<script setup>
import { ref, onMounted, watch } from 'vue'
import axios from 'axios';
import message from './message.vue'
import { useRouter } from 'vue-router'
import { useStore } from '../stores/store';
import prompt from './prompt.vue';

let modal = ref(null)
let prompt1 = ref(null)
let lir = ref([])
let total = ref()
let page = ref(1)
let pagesize = ref(10)
let studentName = ref()
let pages = ref()
const store = useStore()
const router = useRouter()

const list = async () => {
  const response = await axios({
    method: 'get',
    url: 'http://localhost:8080/student/',
    withCredentials: true,
    params: {
      page: page.value,
      pageSize: pagesize.value
    }
  })

  console.log(response.data.data.records);
  lir.value = response.data.data.records
  total.value = response.data.data.total
  pages.value = response.data.data.pages
}
const next = () => {  
  if(page.value==pages.value){
    modal.value.show({
      code: 0,
      msg: '没有下一页了'
    })
  }else(
    page.value = page.value + 1
  )
}
const previous = () => {
  if(page.value==1){
    modal.value.show({
      code: 0,
      msg: '没有上一页了'
    })
  }else{
    page.value = page.value - 1
  }
}
const search = () => {
  axios({
    method: 'get',
    url: 'http://localhost:8080/student/search',
    withCredentials: true,
    params: {
      name: studentName.value,
      page: page.value,
      pageSize: pagesize.value
    }
  }).then(function (response) {
    lir.value = response.data.data.records
  })
}
const checkadmin = () => {
  let admin = localStorage.getItem('adminUsername')  
  return admin==='zhangsan'
}
const edit = (id) => {
  store.setstudentid(id)
  router.push('/adminindex/{'+id+'}')
}

const deleting =  async (id) => {
  let message = '是否删除？'
  const result = await prompt1.value.showprompt(message)
  if (result) {
    det(id)
  }
}
const det = (id) => {
  axios({
    method: 'delete',
    url: 'http://localhost:8080/student/',
    withCredentials: true,
    params: {
      id: id
    }
  }).then(function (response) {
    if (response.data.code == 1) {
      modal.value.show({
        code: 1,
        msg: '删除成功'
      })
      list()
    }
  })
}
const first = () => {
  page.value = 1
}
const end = () => {
  page.value = pages.value
}
onMounted(() => {
  checkadmin()
  list()
})
watch(pagesize, () => {
  list()
})
watch(page, () => {
  list()
})
watch(studentName, () => {
  search()
})
</script>
<template>
  <div class="studentList">
    <div class="title">
      <p>学生信息</p>
    </div>
    <div class="search">
      <input type="text" class="search-input" placeholder="搜索用户名" v-model="studentName">
      <!-- <button class="search-button" @click="search">搜索</button> -->
      <button class="begin mr" @click="first"> << </button>
      <button class="previous mr" @click="previous"> < </button>
      <p>第 {{ page }} 页</p>
      <button class="next mr" @click="next">></button>
      <button class="end mr" @click="end">>></button>
      <p class=" mr"> 共 {{ total }} 条数据</p>
      <p class="mr"> 每页显示<input type="text" class="num" v-model="pagesize">个</p>
    </div>
    <div class="tab">
      <div class="hea">
        <div class="username">用户名</div>
        <div class="name">姓名</div>
        <div class="sex">性别</div>
        <div class="idcode">身份证号</div>
        <div class="nation">民族</div>
        <div class="action">操作</div>
      </div>
      <div v-for="item in lir" :key="item.id" class="row">
        <div class="username">{{ item.studentUsername }}</div>
        <div class="name">{{ item.studentName }}</div>
        <div class="sex">{{ item.studentSex }}</div>
        <div class="idcode">{{ item.studentIdCode }}</div>
        <div class="nation">{{ item.studentNation }}</div>
        <div class="acton"><button class="edit" @click="edit(item.id)">编辑</button> <button v-if="checkadmin()" @click="deleting(item.id)">删除</button></div>
      </div>
    </div>
  </div>
  <message ref="modal"></message>
  <prompt ref="prompt1"></prompt>
</template>
<style scoped>
.studentList {
  margin: 5px;
  width: 1000px;
}

.search {
  width: 100%;
  height: 45px;
  background-color: aliceblue;
  display: flex;
  align-items: center;
  border-radius: 40px;
  margin-top: 5px;
}

.search-input {
  height: 40px;
  width: 300px;
  outline: none;
  font-size: 15px;
  margin-left: 4px;
  border-radius: 40px;
  border: 1px solid;
  padding: 0 10px;
}

.search-button {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  border-radius: 30px;
  border: 1px solid #010101;
  background-color: transparent;
}

.tab {
  margin-top: 5px;
  width: 100%;
  height: 30px;
  background-color: antiquewhite;
}

.hea {
  display: flex;
  justify-content: space-around;
  line-height: 30px;
}

.row {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #eee;
  height: 40px;
  align-items: center;
}

.sex {
  width: 40px;
}

.hea>div,
.row>div {
  flex: 1;
  text-align: center;
  min-width: 0;

}
.num{
  width: 30px;
}
.mr{
  margin-left: 5px;
}
.row button{
  background-color: #010101;
  color: #eee;
  border: #ffffff solid 1px;
  border-radius: 20px;
  height: 30px;
  width: 50px;
}
</style>
